import React, { useImperativeHandle, useRef } from "react";

const Hello = React.forwardRef((props, ref) => {
  useImperativeHandle(
    ref,
    () => {
      return {
        name: "张三",
        age: 18,
      };
    },
    []
  );

  return (
    <div className="hello">
      <h1 ref={ref}>Hello</h1>
    </div>
  );
});

function App() {
  const helloRef = useRef();

  return (
    <div className="app">
      <h1>App</h1>
      <button
        onClick={() => {
          console.log(helloRef.current);
        }}
      >
        点我
      </button>

      <Hello ref={helloRef} />
    </div>
  );
}

export default App;

/**
 * 需求：期望 App 能够获取到 Hello 组件的实例
 *
 * 这个需求，正常是做不了的。原因是 Hello 组件为 函数式组件，函数式组件没有实例
 *
 * 要实现的只能是一个假的实例对象，实例对象的内容，是我们在 Hello 组件中写的。
 *
 * 实现步骤
 * 1. Hello 组件需要先用 React.forwardRef 做 ref 转发
 *
 * 2. Hello 组件中调用 useImperativeHandle(ref, () => {
 *    返回的内容会给到 App 组件的 helloRef
 * }, deps)
 */
